//Vue的插件机制 
import XtxSkeleton from './skeleton/index.vue'
import XtxCarousel from './carousel/index.vue'
import XtxMore from './more/index.vue'
import Bread from './Bread/index.vue'
import BreadItem from './Bread/Item.vue'
import XtxCity from './city/index.vue'
import XtxNumbox from '@/components/numbox/index.vue'
import XtxButton from '@/components/button/index.vue'
import XtxCheckbox from '@/components/checkbox/index.vue'
import XtxMessage from '@/components/message/message.vue'
import { App } from 'vue'
import { useIntersectionObserver } from '@vueuse/core'
import defaulting from '@/assets/images/200.png'
import XtxDialog from '@/components/dialog/index.vue'
import XtxSwitch from '@/components/switch/index.vue'
import XtxTabs from '@/components/tabs/index.vue'
import XtxTabsPane from '@/components/tabs/pane.vue'
export default {
  install(app: App) {
    app.component(XtxSkeleton.name, XtxSkeleton)
    app.component(XtxCarousel.name, XtxCarousel)
    app.component(XtxMore.name, XtxMore)
    app.component('XtxBread', Bread)
    app.component('XtxBreadItem', BreadItem)
    app.component('XtxCity', XtxCity)
    app.component('XtxNumbox', XtxNumbox)
    app.component('XtxButton', XtxButton)
    app.component('XtxCheckbox', XtxCheckbox)
    app.component('XtxMessage', XtxMessage)
    app.component('XtxDialog', XtxDialog)
    app.component('XtxSwitch', XtxSwitch)
    app.component('XtxTabs', XtxTabs)
    app.component('XtxTabsPane', XtxTabsPane)
    //不仅可以注册全局组件 也可也注册全局指令
    // app.directive(自定义指令名,{mounted})
    app.directive('lazy', {
      mounted(el, binding) {
        // console.log(el, binding);
        const { stop } = useIntersectionObserver(el, ([{ isIntersecting }]) => {
          if (isIntersecting) {
            el.src = binding.value
            //处理图片加载失败后 设置默认图片
            el.onerror = () => {
              el.src = defaulting
            }
            stop()
          }
        })
      }
    })
  }
}
